<template>
  <div :class="$style.root">
    <vue-seamless-scroll
      v-if="list.length"
      :data="list"
      :class-option="options"
      :class="$style.wrapper"
    >
      <div :class="$style.ul">
        <div :class="$style.li" v-for="item in list">
          <span :class="$style.title" v-text="item.title"></span>
        </div>
      </div>
    </vue-seamless-scroll>
  </div>
</template>

<script>
import Vue from "vue";

import VueSeamlessScroll from "vue-seamless-scroll";

Vue.use(VueSeamlessScroll);
export default {
  name: "lcap-stt-dataScroll",
  props: {
    step: {
      type: Number,
      default: 3,
    },
    url: {
      type: String,
      default: "https://mock.apifox.cn/m1/1695860-0-default/list",
    },
    valueKey: {
      type: String,
      default: "title",
    },
    hoverStop: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {
      options: {
        step: this.step / 10,
        hoverStop: this.hoverStop,
      },
      list: [],
    };
  },
  methods: {
    init() {
      this.getList();
    },
    getList() {
      const that = this;
      fetch(this.url, {
        method: "GET",
      }).then(function(res) {
        if (res.status === 200) {
          return res.json()
        } else {
          return Promise.reject(res.json())
        }
      }).then(function(res) {
        that.list = res.data.map(item=>{
          return {
            ...item,
            title: item[that.valueKey]
          }
        })
      }).catch(function(err) {
        console.log(err);
      });
    },
  },
  mounted() {
    this.init();
  },
};
</script>

<style module>
.root {
  border: 1px solid #4662fb;
  padding: 2px;
  width: 500px;
  position: relative;
}
.root:before {
  content: "";
  width: 30px;
  height: 3px;
  background-color: #4662fb;
  position: absolute;
  top: -3px;
  left: -1px;
}
.root:before {
  content: "";
  width: 3px;
  height: 30px;
  background-color: #4662fb;
  position: absolute;
  top: -3px;
  left: -3px;
}
.root:before {
  content: "";
  width: 3px;
  height: 30px;
  background-color: #4662fb;
  position: absolute;
  top: -3px;
  left: -3px;
}
.wrapper {
  height: 180px;
  overflow: hidden;
}
.ul {
  background-color: #111aac;
}
.li {
  text-align: center;
  border-top: 1px solid #999;
  background-color: #111aac;
  color: #fff;
  padding: 5px 8px;
}
</style>
